<template>
  <div class="parent">
    <div style="width: 10px; height: 20px" />
    <px-tooltip class="box-item" effect="dark" content="导出图片" placement="bottom">
      <px-icon class="downImg" color="#3b82f6" @click="saveImg"><Download /></px-icon>
    </px-tooltip>
    <echartsDom
      v-if="isShowEcharts"
      ref="childRef"
      :width="'100%'"
      :height="'240px'"
      :option="option"
      :name="`总量占比图`"
      @getPieData="setgetPieData"
    />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
const childRef = ref(null);
const saveImg = () => {
  childRef.value.saveImg();
};
import * as echarts from "echarts";
import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  chartValue: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const emits = defineEmits(["getPieData"]);
const setgetPieData = val => {
  emits("getPieData", val);
};
const { option } = toRefs(state);
const getoptions = () => {
  console.log(props.chartValue);
  if (props.chartValue.length > 0) {
    isShowEcharts.value = true;
    option.value = {
      // toolbox: {
      //   show: true,
      //   feature: {
      //     saveAsImage: {
      //       title: "点击保存为图片"
      //     }
      //   }
      // },
      title: {
        // text: "碳排放类别占比",
        left: "center"
      },
      grid: {
        left: "20px",
        top: "50px",
        right: "10px",
        bottom: "10px",
        containLabel: true
      },
      // legend: {},
      tooltip: {
        trigger: "item"
      },
      legend: {
        top: "top",
        type: "scroll",
        width: "60%"
      },
      label: {
        formatter: "{d}%：{b}"
      },
      series: [
        {
          data: props.chartValue.filter(item => item.value != null && item.value > 0),
          type: "pie",
          name: "总量占比",
          radius: "60%"
          // itemStyle: {
          //   shadowBlur: 10,
          //   ShadowOffsetX: 0,
          //   shadowColor: "rgba(0,0,0,0.5)"
          // }
        }
      ]
    };
  } else {
    isShowEcharts.value = false;
  }
};
watch(
  () => props.chartValue,
  newOption => {
    console.log(newOption);
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.downImg {
  position: absolute;
  top: -30px;
  right: 0;
  cursor: pointer;
}

.unitp {
  font-size: 12px;
  color: #7f8189;
}
</style>
